<template>
	<view>
		<u-popup :model-value="props.show" mode="center" :mask-close-able="false" closeable close-icon-pos="top-left"
			close-icon-color="#fff" close-icon-size="48" @close="close">
			<view class="share" :style="{paddingTop:data.statusBarHeight}">
				<!-- #ifdef H5 -->
				<u-image :src="props.src" :width="data.width" :height="data.height" @touchstart="touchStart()"
					@touchend="touchEnd()" mode="widthFix"></u-image>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<u-image :src="props.src" :width="data.width" :height="data.height" mode="widthFix"></u-image>
				<!-- #endif -->
				<view class="share_change " @click="change">
					<u-icon name="reload" color="#101010"></u-icon>
					<view class="u-m-l-10">
						换一张
					</view>
				</view>
			</view>
			<view class="share_btm u-flex u-row-around">
				<!-- #ifdef H5 -->
				<view class="u-flex" style="flex-direction: column;" @click="saveLocal">
					<u-image src="/static/home/savepicture.png" width="80" height="80" mode="widthFix"></u-image>
					<view class="u-m-t-10">保存到本地</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="u-flex u-flex-column" @click="WXSceneSession">
					<u-image src="/static/home/wx.png" width="80" height="80" mode="widthFix"></u-image>
					<view class="u-m-t-10">微信好友</view>
				</view>
				<view class="u-flex u-flex-column" @click="WXSceneTimeline">
					<u-image src="/static/home/pyq.png" width="80" height="80" mode="widthFix"></u-image>
					<view class="u-m-t-10">朋友圈</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="u-reset-button">
					<u-image src="/static/home/wx.png" width="80" height="80" mode="widthFix"></u-image>
					<view class="u-m-t-10">微信好友</view>
				</button>
				<!-- #endif -->
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		nextTick,
		onMounted,
		reactive,
		watch,
		getCurrentInstance
	} from "vue";
	const instance = getCurrentInstance(); // 获取组件实例
	const props = defineProps({
		show: Boolean,
		src: String
	})
	const emit = defineEmits(['close', 'change'])
	const data = reactive({
		statusBarHeight: '',
		width: uni.$u.sys().windowWidth * 0.8 + 'px',
		height: ""
	})
	watch(() => props.show, (nv) => {
		nextTick(() => {
			getStatusBarHeight()
		})
	}, {
		immediate: true,
		deep: true
	})
	const change = () => {
		emit('change')
	}
	const close = () => {
		emit('close')
	}
	// 获取距离顶部距离
	const getStatusBarHeight = async () => {
		// #ifndef MP-WEIXIN
		let res = await uni.$u.getRect('.share_btm')
		// #ifdef APP-PLUS
		if (uni.$u.os() == 'ios') {
			data.statusBarHeight = uni.$u.sys().statusBarHeight * 2 + 'px'
		} else {
			data.statusBarHeight = uni.$u.sys().statusBarHeight * 3 + 'px'
		}
		data.height = uni.$u.sys().windowHeight - (res.height * 2) - 20 + 'px'
		// #endif
		// #ifdef H5
		data.height = uni.$u.sys().windowHeight - res.height + 'px'
		// #endif
		// #endif
		// #ifdef MP-WEIXIN
		const query = uni.createSelectorQuery().in(instance);
		query.select('.share_btm').boundingClientRect(res => {
			const wxHeight = uni.getMenuButtonBoundingClientRect().height
			data.statusBarHeight = uni.$u.sys().statusBarHeight + wxHeight * 2 + 'px'
			data.height = uni.$u.sys().windowHeight - res.height + wxHeight + 'px'
		}).exec();
		// #endif
	}
	// 保存图片到本地
	const saveLocal = () => {
		let Url = props.src //图片路径，也可以传值进来
		var triggerEvent = "touchstart"; //指定下载方式
		var blob = new Blob([''], {
			type: 'application/octet-stream'
		}); //二进制大型对象blob
		var url = URL.createObjectURL(blob); //创建一个字符串路径空位
		var a = document.createElement('a'); //创建一个 a 标签
		a.href = Url; //把路径赋到a标签的href上
		//正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
		a.download = Url.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];
		/* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）
		e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/

		//代替方法。创建鼠标事件并初始化（后面这些参数我也不清楚，参考文档吧 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent）
		var e = new MouseEvent('click', (true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));
		//派遣后，它将不再执行任何操作。执行保存到本地
		a.dispatchEvent(e);
		//释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
		URL.revokeObjectURL(url);
		/* 
		//这段好像并不影响，所以我不用，注释掉
		var imgs = document.getElementsByTagName("img");
		for(var i = 0,o;o = imgs[i];i++){
			
			o.addEventListener(triggerEvent,function(){
				var newurl = this.getAttribute("src");
				saveAs(newurl);
			},false);
		} */

	}
	// 分享微信朋友
	const WXSceneSession = () => {
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 2,
			imageUrl: props.src
		});
	}
	// 分享朋友圈
	const WXSceneTimeline = () => {
		uni.share({
			provider: "weixin",
			scene: "WXSceneTimeline",
			type: 2,
			imageUrl: props.src
		});
	}
</script>

<style lang="scss" scoped>
	.share {
		width: 100vw;
		height: 100vh;
		padding: 100rpx 30rpx;
		background-color: #1D222F;
		color: #fff;
		display: flex;
		justify-content: center;
		position: relative;
		padding-bottom: 150rpx;

		&_change {
			position: absolute;
			right: 70rpx;
			top: 45%;
			background-color: #fff;
			color: #101010;
			padding: 6rpx 20rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}
	}

	.share_btm {
		background-color: #2E3546;
		height: 140rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		/* #ifdef MP-WEIXIN */
		bottom: env(safe-area-inset-bottom);
		/* #endif */
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		padding-top: 0 20rpx;
	}

	:deep(.u-close) {
		padding-top: var(--status-bar-height) !important;
	}
</style>